<template>
  <el-form-item :label="label">
    <slot name="button">
      <el-button
        :type="buttonType"
        @click="onShowDialog"
      >{{ buttonText }}</el-button>
    </slot>
    <el-alert
      v-if="areas.length"
      type="warning"
      class="area-list"
      :closable="false"
    >
      <level-area-cell v-model="areas" />
    </el-alert>
    <el-dialog
      :title="title"
      append-to-body
      :visible.sync="dialogVisible"
    >
      <transfer-tree
        v-model="areacodes"
        :titles="['可选地区', '禁运地区']"
        :source="source"
        @input="onInput"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
      </div>
    </el-dialog>
  </el-form-item>
</template>

<script>
import { areas, areaTree } from '@/library'
import LevelAreaCell from './LevelAreaCell'
import TransferTree from '@/components/TransferTree'
export default {
  name: 'EmbargoArea',
  components: {
    LevelAreaCell,
    TransferTree
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: '设置不支持配送地区'
    },
    label: {
      type: String,
      default: '禁运地区'
    },
    showAdd: {
      type: Boolean,
      default: true
    },
    buttonType: {
      type: String,
      default: 'text'
    },
    buttonText: {
      type: String,
      default: '设置禁运区域'
    }
  },
  data() {
    return {
      formModel: [],
      areas: [],
      temp: [],
      source: areas,
      dialogVisible: false,
      dialogTitle: '',
      data: [],
      dist: []
    }
  },
  computed: {
    areacodes: {
      get() {
        return [...this.value]
      },
      set(val) {
        this.$emit('input', [...val])
      }
    }
  },
  mounted() {
    this.dist = areaTree
  },
  methods: {
    onInput(v) {
      this.temp = v
    },
    submitForm() {
      this.areas = this.temp
      this.areacodes = this.temp.map(item => {
        return item.code
      })
      this.dialogVisible = false
    },
    onShowDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scope>
.area-list {
  border-radius: 4px;
  background: #f3f4f5;
  padding: 10px;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.el-transfer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-transfer-panel {
  flex: 1;
  &__body {
    height: 400px;
  }
  &__list.is-filterable {
    height: 100%;
  }
  &__item {
    .el-checkbox__input {
      display: none;
    }
  }
}

.el-transfer-panel__item.el-checkbox {
  margin: 0;
  padding: 10px;
  height: auto;
  line-height: initial;
  width: 100%;

  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    border-bottom: 1px solid #f3f4f5;
    background: #f3f4f5;
    width: 100%;
    content: '';
  }
  .el-checkbox__label {
    line-height: initial;
    padding: 0;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        font-size: 14px;
        margin: 0;
      }
      p {
        font-size: 12px;
        margin: 0;
        font-weight: 300;
        overflow: hidden;
        color: #ccc;
      }
      span {
        align-self: flex-start;
        font-size: 12px;
        font-weight: 300;
      }
    }
  }
  &.is-checked {
    background: #1890ff;
    .el-checkbox__label {
      color: #fff;
      p {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
</style>
